﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加工工艺路线管理</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 搜索条件表单 -->
                <form class="layui-form" id="search-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">路线编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="workmanshipCode" placeholder="请输入工艺路线编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">路线名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="workmanshipName" placeholder="请输入工艺路线名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">是否启用</label>
                            <div class="layui-input-inline">
                                <select name="isNo">
                                    <option value="">请选择</option>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search-btn">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 表格上方的工具栏 -->
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>新增
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </button>
                    </div>
                </script>

                <!-- 数据表格容器 -->
                <table id="workmanship-table" lay-filter="workmanship-table"></table>

                <!-- 表格中每一行的操作按钮 -->
                <script type="text/html" id="row-toolbar">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                </script>

            </div>
        </div>
    </div>

    <!-- 新增/编辑弹窗的 HTML 结构 -->
    <div id="edit-dialog" style="display: none; padding: 20px;">
        <form class="layui-form" id="edit-form" lay-filter="edit-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">路线编号</label>
                <div class="layui-input-block">
                    <input type="text" name="workmanshipCode" placeholder="留空将自动生成" autocomplete="off" class="layui-input">
                </div>
            </div>
             <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="checkbox" name="autoGenerateCode" title="自动生成" lay-skin="switch" lay-filter="auto-generate-code" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">路线名称</label>
                <div class="layui-input-block">
                    <input type="text" name="workmanshipName" required lay-verify="required" placeholder="请输入工艺路线名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="isNo" value="1" title="是" checked>
                    <input type="radio" name="isNo" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">路线说明</label>
                <div class="layui-input-block">
                    <textarea name="workmanshipDescribe" placeholder="请输入说明" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="context" placeholder="请输入备注" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: right;">
                <button class="layui-btn" lay-submit lay-filter="save-btn">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel-btn">取消</button>
            </div>
        </form>
    </div>

    <!-- 引入必要的 JavaScript 库 -->
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.all.js"></script>
    <script>
        // 使用 layui 模块
        layui.use(['table', 'form', 'layer'], function () {
            // 获取所需模块的实例
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 用于存储当前正在编辑的数据的ID，如果为null，则表示是新增操作
            var currentEditId = 0;

            // 初始化并渲染数据表格
            table.render({
                elem: '#workmanship-table', // 指定表格容器
                url: '/Workmanship/api/list', // 新的API地址
                toolbar: '#toolbar', // 指定表格头部的工具栏
                defaultToolbar: ['filter', 'exports', 'print'], // 开启默认的工具栏（筛选、导出、打印）
                page: true, // 开启分页
                // 自定义请求参数，以适配ABP框架的分页接口
                request: {
                    pageName: 'skipCount', // ABP分页参数：跳过的项目数
                    limitName: 'maxResultCount' // ABP分页参数：每页最大结果数
                },
                // 解析从服务器返回的数据，将其转换为layui表格能识别的格式
                parseData: function(res){ 
                    return {
                        "code": 0, // layui规定成功的状态码为0
                        "msg": "", // 消息文本
                        "count": res.totalCount, // 数据总数
                        "data": res.items // 当前页的数据列表
                    };
                },
                // 定义表格的列
                cols: [
                    
                    { type: 'checkbox', fixed: 'left' }, // 复选框列，固定在左侧
                    { field: 'id', title: 'ID', width: 80, sort: true, hide: true }, // ID列，默认隐藏
                    { field: 'workmanshipCode', title: '工艺路线编号', width: 200 },
                    { field: 'workmanshipName', title: '工艺路线名称', width: 150 },
                    {
                        field: 'isNo', title: '是否启用', width: 100, templet: function (d) {
                            // 使用模板函数格式化"是否启用"列的显示
                            return d.isNo === 1 ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge layui-bg-gray">否</span>';
                        }
                    },
                    { field: 'workmanshipDescribe', title: '说明' },
                    { field: 'context', title: '备注' },
                    { fixed: 'right', title: '操作', toolbar: '#row-toolbar', width: 150 } // 操作列，使用行工具栏模板，固定在右侧
                ]],
                response: {
                    statusCode: 0 // 定义成功的状态码
                },
                // 表格渲染完成后的回调函数
                done: function() {
                    // layui的表单元素（如switch）在动态添加后需要重新渲染才能正确显示样式
                    form.render('checkbox');
                }
            });
            
            // 监听"自动生成编号"的switch开关状态变化
            form.on('switch(auto-generate-code)', function(data){
                // 限定选择器范围，只影响编辑弹窗内的输入框
                var codeInput = $('#edit-form').find('input[name="workmanshipCode"]');
                if(data.elem.checked){
                    // 如果开关开启，禁用编号输入框并清空其值
                    codeInput.val('').prop('disabled', true);
                } else {
                    // 如果开关关闭，启用编号输入框
                    codeInput.prop('disabled', false);
                }
            });

            // 监听搜索表单的提交事件
            form.on('submit(search-btn)', function (data) {
                // 表格重载，带上新的查询条件
                table.reload('workmanship-table', {
                    where: data.field, // `data.field` 即为表单中的所有字段
                    page: {
                        curr: 1 // 搜索后从第一页开始显示
                    }
                });
                return false; // 阻止表单的默认提交行为
            });

            // 监听表格头部工具栏的事件
            table.on('toolbar(workmanship-table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id); // 获取表格中被选中的行
                switch (obj.event) {
                    case 'add':
                        // 新增操作
                        openEditDialog('add');
                        break;
                    case 'delete':
                        // 批量删除操作
                        var data = checkStatus.data; // 获取选中的行数据
                        if (data.length === 0) {
                            layer.msg('请选择要删除的行');
                        } else {
                            var ids = data.map(function(item) { return item.id; }); // 提取所有选中行的ID
                            layer.confirm('确定删除选中的 ' + data.length + ' 条数据吗？', function (index) {
                                $.ajax({
                                    url: '/Workmanship/api/batch-delete', // 新的批量删除API地址
                                    type: 'POST', // 批量删除通常使用POST，将ID列表放在请求体中
                                    contentType: 'application/json',
                                    data: JSON.stringify(ids), // 将ID数组序列化为JSON字符串
                                    success: function() {
                                        layer.msg('删除成功');
                                        table.reload('workmanship-table'); // 重新加载表格数据
                                    },
                                    error: function() {
                                        layer.msg('删除失败');
                                    }
                                });
                                layer.close(index);
                            });
                        }
                        break;
                };
            });

            // 监听表格行内工具栏的事件（编辑和删除）
            table.on('tool(workmanship-table)', function (obj) {
                var data = obj.data; // 获取当前行的数据
                if (obj.event === 'delete') {
                    // 单行删除
                    layer.confirm('确定删除这条数据吗？', function (index) {
                         $.ajax({
                            url: '/Workmanship/api/delete/' + data.id, // 新的单行删除API地址
                            type: 'DELETE',
                            success: function() {
                                layer.msg('删除成功');
                                obj.del(); // 在表格中删除该行，无需刷新整个表格
                            },
                            error: function() {
                                layer.msg('删除失败');
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    // 编辑操作
                    openEditDialog('edit', data);
                }
            });

            // 封装的打开新增/编辑弹窗的函数
            function openEditDialog(type, data) {
                var title = type === 'add' ? '新增加工工艺路线' : '编辑加工工艺路线';
                currentEditId = data ? data.id : null; // 如果是编辑，则记录ID

                // 获取将要操作的DOM元素
                var codeInput = $('#edit-form input[name="workmanshipCode"]');
                var autoGenerateSwitchContainer = $('input[name="autoGenerateCode"]').closest('.layui-form-item');

                layer.open({
                    type: 1, // 弹窗类型为页面层
                    title: title,
                    area: ['600px', '550px'], // 设置弹窗宽高
                    content: $('#edit-dialog'), // 指定弹窗内容
                    success: function () {
                        // 弹窗成功弹出后的回调，先重置表单
                        $('#edit-form')[0].reset();

                        if (type === 'edit') {
                            // --- 编辑模式 ---
                            // 1. 回填数据
                            form.val('edit-form', data);
                            // 2. 禁用编号输入框，不允许修改
                            codeInput.prop('disabled', true);
                            // 3. 隐藏"自动生成编号"的开关，因为编辑时不需要
                            autoGenerateSwitchContainer.hide();
                        } else {
                            // --- 新增模式 ---
                            // 1. 确保"自动生成编号"的开关是可见的
                            autoGenerateSwitchContainer.show();
                            // 2. 根据开关的默认状态（我们是checked），设置编号输入框的初始状态
                            var isChecked = $('input[name="autoGenerateCode"]').prop('checked');
                            codeInput.prop('disabled', isChecked);
                            if (isChecked) {
                                codeInput.val('');
                            }
                        }

                        // 最后，重新渲染整个表单，让layui应用所有样式和状态
                        form.render();
                    }
                });
            }

            // 监听编辑弹窗内保存按钮的提交事件
            form.on('submit(save-btn)', function (data) {
                var url, type;
                var codeInput = $('#edit-form input[name="workmanshipCode"]');

                // 提交前，临时启用被禁用的编号输入框，以确保其值能被包含在表单数据中
                var isCodeInputDisabled = codeInput.is(':disabled');
                if (isCodeInputDisabled) {
                    codeInput.prop('disabled', false);
                }

                // 手动从表单获取最新的数据
                var formData = form.val('edit-form');
                
                // 将"on"/undefined 转换为布尔值 true/false
                formData.autoGenerateCode = $('input[name="autoGenerateCode"]').is(':checked');

                // 提交后，如果原来是禁用的，再把它禁用回去，以保持UI状态一致
                if (isCodeInputDisabled) {
                    codeInput.prop('disabled', true);
                }

                // 根据 currentEditId 判断是新增还是更新
                if (currentEditId>0) {
                    // 更新操作
                    url = '/Workmanship/api/update/' + currentEditId;
                    type = 'PUT';
                    formData.id = currentEditId;
                } else {
                    // 新增操作
                    url = '/Workmanship/api/create';
                    type = 'POST';
                    formData.id = 0;
                }

                $.ajax({
                    url: url,
                    type: type,
                    contentType: 'application/json',
                    data: JSON.stringify(formData), // 使用我们手动获取的、包含所有字段的formData
                    success: function (res) {
                        layer.closeAll('page'); // 关闭所有弹窗
                        layer.msg('保存成功');
                        table.reload('workmanship-table'); // 刷新表格
                        currentEditId = 0; // 操作完成后，重置ID状态
                    },
                    error: function () {
                        layer.msg('保存失败');
                    }
                });

                return false; // 阻止表单默认提交
            });

            // 监听取消按钮的点击事件
            $('#cancel-btn').on('click', function() {
                layer.closeAll('page'); // 关闭弹窗
            });

        });
    </script>
</body>
</html>

